<template>
  <div>
    <basic-container>

      <card :header="orderOption.ship.header" :data="orderOption.ship.data"></card>
      <card :header="orderOption.other.header" :data="orderOption.other.data"></card>

      <div class="card" v-loading="tableLoading">
        <el-row>
          <h3 class="title">
            商品描述
          </h3>

          <el-table :data="itemData" stripe style="width: 100%">
            <el-table-column label="商品描述" width="200">
              <template slot-scope="scope">
                <div style="flex-direction: row;align-items: center;">
                  <img :src="scope.row.snapshot.cover" style="width:40px;height:40px;vertical-align: middle;">
                  <span style="margin-left: 10px">{{ scope.row.snapshot.title }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="规格" width="auto">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.snapshot.sku }}</span>
              </template>
            </el-table-column>
            <el-table-column label="单价">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.snapshot.price}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="数量">
            </el-table-column>
            <el-table-column label="小计">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ (scope.row.snapshot.price*scope.row.amount) | numFilter}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row style="margin-top:20px">
          <span style="font-size:14px;float:right">共 1 件商品 合计：￥6.00（含运费：￥0.00）</span>
        </el-row>
      </div>
    </basic-container>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import crudMixin from '@/mixins/crud'
import options from "./options.js";
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import { field, reField } from "./field";
import card from "@/views/merchant/common/card";


export default {
  name: "role",
  mixins: [crudMixin],
  components: {
    card
  },
  data() {
    return {
      orderId: 0,
      orderOption: {
        base: {
        },
        ship: {
        },
        other: {
        },
      },
      flagMap: {
        0: '待付款',
        1: '订单取消',
        2: '等待发货',
        3: '等待发货',
        4: '订单取消',
        5: '待用户确认取消',
        6: '订单取消',
        7: '已发货',
        8: '已完成',
      },
      orderData: {},
      itemData: [],
      tableLoading: true
    }
  },
  created() {
    // 获取id
    this.orderId = this.$route.query.id;
    //初始化数据格式
    this.handleData();
  },
  watch: {},
  mounted() { },
  computed: {
  },
  filters: {
    numFilter: function (value) {
      let realVal = Number(value).toFixed(2)
      return realVal
    }
  },
  props: [],
  methods: {
    handleData() {
      let param = {
        id: this.orderId
      }
      this.tableLoading = true;

      this.$store
        .dispatch("GetOrderDetail", param)
        .then(
          res => {
            if (res.data.status == 1) {
              let _data = res.data.result.data || []
              this.orderData = _data;
              this.itemData = this.orderData.items
              this.filterData(_data)
            }
            else {
              errorMsg('加载错误');
            }
            this.tableLoading = false;

          }, error => {
            this.tableLoading = false;

          })
    },
    filterData(order) {
      this.getBase(order)
      this.getShip(order)
      this.getOther(order)
    },
    filterItemsData(items) {

    },
    getBase(order) {


      this.orderOption.base = {
        header: '基本信息',
        data: [
          { label: '订单号', value: order.no },
          { label: '下单时间', value: order.created_at },
          { label: '订单状态', value: this.flagMap[order.flag] },
          { label: '支付平台交易号', value: order.no }
        ]
      }
    },
    getShip(order) {
      let address = order.address
      if (isNull(address)) {
        this.orderOption.ship = {
          header: '收货信息',
          data: [
            { label: '联系人', value: '' },
            { label: '联系电话', value: '' },
            { label: '详细地址', value: '' }
          ]
        }
      }
      else {
        this.orderOption.ship = {
          header: '收货信息',
          data: [
            { label: '联系人', value: address.contact_phone },
            { label: '联系电话', value: address.contact_name },
            { label: '详细地址', value: address.address }
          ]
        }
      }

    },
    getOther(order) {
      this.orderOption.other = {
        header: '其他信息',
        data: [
          { label: '买家留言', value: order.remark },
        ]
      }
    }
  }
};
</script>

<style>

.card:last-child {
    border-bottom: 0px;
}

.card {
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ededed;
}

.card .title {
    font-weight: 600;
    font-style: normal;
    color: rgba(0, 0, 0, 0.847058823529412);
}
</style>

